<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-10 16:34:09
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-19 14:21:15
 * @Description: 侧边栏
-->
 
<script setup>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
import { menu, role } from "@/api";

const store = useStore();

const isCollapse = computed(() => {
  return store.state.Menu.isCollapse;
});
const id = sessionStorage.role;
const menuList = (await role.getMenu({ id, type: "tree" })).data;

store.state.Menu.menu = menuList
</script>


<template>
  <el-menu router class="el-menu-vertical-demo" :collapse="isCollapse">
    <el-scrollbar>
      <el-menu-item index="/admin/home">
        <el-icon><House /></el-icon>
        首页
      </el-menu-item>
      <template v-for="(item, index) in menuList" :key="item.id">
        <el-menu-item v-if="item.path" :index="item.path">
          <el-icon>
            <component :is="item.icon_name"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>

        <el-sub-menu v-else :index="index">
          <template #title>
            <el-icon>
              <component :is="item.icon_name"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="element in item.children"
            :key="element.id"
            :index="element.path"
          >
            <el-icon>
              <component :is="element.icon_name"></component>
            </el-icon>
            <span>{{ element.name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>

    </el-scrollbar>
  </el-menu>
</template>


<style lang='less' >
.el-menu-vertical-demo {
  height: 100%;
  .el-menu-item,
  .el-sub-menu {
    overflow-x: hidden;
    .el-sub-menu__title {
      &:hover {
        background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
        color: #fff;
      }
    }
    &.is-opened {
      .el-sub-menu__title {
        background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
        color: #fff;
      }
    }
    &.is-active {
      .el-sub-menu__title {
        background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
        color: #fff;
      }
      background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
      color: #fff;
    }
    &:hover {
      background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
      color: #fff;
    }
    .el-icon {
      margin-right: 20px;
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>


